<template>
  <div class="popup-panel">
    <div class="popup-panel-title">
      <div class="popup-panel-title-content">
        <div class="popup-panel-title-content-info">
          <img :src="titleIcon" alt="关闭">
          <span>{{ popTitle }}</span>
        </div>
        <img :src="closeIcon" alt="关闭" style="display: none">
      </div>
    </div>
    <div class="popup-panel-content">
      <component :is="contentComponent"/>
    </div>
  </div>
</template>

<script>
import closeIcon from './../images/popup-close-icon.png'
import titleIcon from './../images/popup-icon.png'
import VideoComponent from "./video.vue";
import ShebeiComponent from "./shebei.vue";
import TryqComponent from "./tryq.vue";
import CbhjcComponent from "./cbhjc.vue";

export default {
  name: 'PopControl',
  components: {TryqComponent, VideoComponent, ShebeiComponent, CbhjcComponent},
  data() {
    return {
      closeIcon,
      titleIcon,
      contentComponent: null,
      popTitle: ''
    };
  },
  mounted() {
    this.updateContent();
  },
  watch: {
    '$route.query': 'updateContent'
  },
  methods: {
    updateContent() {
      const contentType = this.$route.query.type;
      console.log(contentType)
      if (contentType === '1') {
        this.popTitle = '土壤舆情';
        this.contentComponent = TryqComponent;
      } else if (contentType === '2') {
        this.popTitle = '视频监控';
        this.contentComponent = VideoComponent;
      } else if (contentType === '3') {
        this.popTitle = '设备信息';
        this.contentComponent = ShebeiComponent;
      } else if (contentType === '4') {
        this.popTitle = '病虫害监测';
        this.contentComponent = CbhjcComponent;
      }
    }
  }
};
</script>

<style lang="scss" scoped>

.popup-panel {
  width: 285px;
  height: 262px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;

  .popup-panel-title {
    width: 285px;
    height: 46px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    align-self: stretch;
    background: linear-gradient(270deg, rgba(23, 95, 79, 0) 0%, #175F4F 72%, rgba(23, 95, 79, 0) 100%);

    .popup-panel-title-content {
      width: 269px;
      height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      align-self: stretch;

      .popup-panel-title-content-info {
        width: 104.01px;
        height: 30px;

        > span {
          position: absolute;
          font-family: YouSheBiaoTiHei;
          font-size: 20px;
          font-weight: normal;
          line-height: 30px;
          letter-spacing: 2px;
          color: #FFFFFF;
          margin-left: 5px;
        }

        > img {
          margin-top: 7px;
          width: 16.01px;
          height: 16px;
        }
      }

      > img {
        /* 自动布局子元素 */
        position: static;
        left: 245px;
        top: 3px;
        width: 24px;
        height: 24px;
        opacity: 1;

        z-index: 2;
      }
    }
  }

  .popup-panel-content {
    /* 自动布局子元素 */
    position: static;
    left: 0px;
    top: 46px;
    width: 285px;
    border-radius: 5px;
    max-height: 300px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(10, 56, 48, 0.7);
    box-sizing: border-box;
    border: 1px solid rgba(59, 214, 172, 0.6);

    z-index: 1;
  }
}
</style>
